<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>skinview3d</title>
		<style>
			body {
				margin: 0;
				padding: 20px;
				display: flex;
				flex-direction: row;
				gap: 20px;
				min-height: 100vh;
				box-sizing: border-box;
			}

			#skin_container {
				width: 400px;
				height: 600px;
				position: sticky;
				top: 20px;
				align-self: flex-start;
			}

			.controls {
				flex: 1;
				overflow-y: auto;
				padding-right: 20px;
			}

			@media (max-width: 1024px) {
				body {
					flex-direction: column;
				}

				#skin_container {
					width: 100%;
					height: 400px;
					position: relative;
					top: 0;
				}

				.controls {
					padding-right: 0;
				}
			}

			.control-section {
				margin-bottom: 20px;
				padding: 15px;
				background: #f5f5f5;
				border-radius: 8px;
			}

			.control-section h1 {
				margin-top: 0;
				font-size: 1.2em;
			}

			.control {
				margin: 5px 0;
			}

			footer {
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				background: white;
				padding: 10px 20px;
				text-align: center;
				border-top: 1px solid #eee;
			}
		</style>
	</head>

	<body>
		<canvas id="skin_container"></canvas>

		<div class="controls">
			<button id="reset_all" type="button" class="control">Reset All</button>

			<div class="control-section">
				<h1>Viewport</h1>
				<div>
					<label class="control">Width: <input id="canvas_width" type="number" value="300" size="4" /></label>
					<label class="control">Height: <input id="canvas_height" type="number" value="300" size="4" /></label>
				</div>
				<div>
					<label class="control"
						>FOV: <input id="fov" type="number" value="70" step="1" min="1" max="179" size="2"
					/></label>
					<label class="control"
						>Zoom: <input id="zoom" type="number" value="0.90" step="0.01" min="0.01" max="2.00" size="4"
					/></label>
				</div>
			</div>

			<div class="control-section">
				<h1>Light</h1>
				<label class="control"
					>Global: <input id="global_light" type="number" value="3" step="0.01" min="0.00" max="2.00" size="4"
				/></label>
				<label class="control"
					>Camera: <input id="camera_light" type="number" value="0.60" step="0.01" min="0.00" max="2.00" size="4"
				/></label>
			</div>

			<div class="control-section">
				<h1>Rotation</h1>
				<label class="control"><input id="auto_rotate" type="checkbox" /> Enable</label>
				<label class="control"
					>Speed: <input id="auto_rotate_speed" type="number" value="2" step="0.1" size="3"
				/></label>
			</div>

			<div class="control-section">
				<h1>Animation</h1>
				<div>
					<label><input type="radio" id="animation_none" name="animation" value="" checked /> None</label>
					<label><input type="radio" id="animation_idle" name="animation" value="idle" /> Idle</label>
					<label><input type="radio" id="animation_walk" name="animation" value="walk" /> Walk</label>
					<label><input type="radio" id="animation_run" name="animation" value="run" /> Run</label>
					<label><input type="radio" id="animation_fly" name="animation" value="fly" /> Fly</label>
					<label><input type="radio" id="animation_wave" name="animation" value="wave" /> Wave</label>
					<label><input type="radio" id="animation_crouch" name="animation" value="crouch" /> Crouch</label>
					<label><input type="radio" id="animation_hit" name="animation" value="hit" /> Hit</label>
				</div>
				<label class="control">Speed: <input id="animation_speed" type="number" value="1" step="0.1" size="3" /></label>
				<button id="animation_pause_resume" type="button" class="control">Pause / Resume</button>

				<br />
				<div class="control" id="crouch_setting" style="display: none">
					Crouch settings:
					<label><input type="checkbox" id="run_once" name="crouch_setting_item" value="runOnce" />Run once</label>
					<label
						><input type="checkbox" id="show_progress" name="crouch_setting_item" value="showProgress" />Show
						progress</label
					>
					<label>
						<input type="checkbox" id="add_hitting_animation" name="crouch_setting_item" value="addHitAnimation" />Add
						hitting animation</label
					>
					<br /><label class="control" id="hit_speed_label" style="display: none"
						>Hit speed :<input
							id="hit_speed"
							type="number"
							value=""
							step="0.1"
							size="3"
							placeholder="default following crouch speed"
							style="width: 190px"
					/></label>
				</div>
			</div>

			<div class="control-section">
				<h1>Mouse Control</h1>
				<div class="control">
					<label><input type="checkbox" id="control_rotate" checked /> Enable Rotate</label>
					<label><input type="checkbox" id="control_zoom" checked /> Enable Zoom</label>
					<label><input type="checkbox" id="control_pan" /> Enable Pan</label>
				</div>
			</div>

			<div class="control-section">
				<h1>Skin Layers</h1>
				<table id="layers_table">
					<thead>
						<tr>
							<th></th>
							<th>head</th>
							<th>body</th>
							<th>right arm</th>
							<th>left arm</th>
							<th>right leg</th>
							<th>left leg</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<th>inner</th>
							<td><input type="checkbox" data-layer="innerLayer" data-part="head" checked /></td>
							<td><input type="checkbox" data-layer="innerLayer" data-part="body" checked /></td>
							<td><input type="checkbox" data-layer="innerLayer" data-part="rightArm" checked /></td>
							<td><input type="checkbox" data-layer="innerLayer" data-part="leftArm" checked /></td>
							<td><input type="checkbox" data-layer="innerLayer" data-part="rightLeg" checked /></td>
							<td><input type="checkbox" data-layer="innerLayer" data-part="leftLeg" checked /></td>
						</tr>
						<tr>
							<th>outer</th>
							<td><input type="checkbox" data-layer="outerLayer" data-part="head" checked /></td>
							<td><input type="checkbox" data-layer="outerLayer" data-part="body" checked /></td>
							<td><input type="checkbox" data-layer="outerLayer" data-part="rightArm" checked /></td>
							<td><input type="checkbox" data-layer="outerLayer" data-part="leftArm" checked /></td>
							<td><input type="checkbox" data-layer="outerLayer" data-part="rightLeg" checked /></td>
							<td><input type="checkbox" data-layer="outerLayer" data-part="leftLeg" checked /></td>
						</tr>
					</tbody>
				</table>
				<div>
					<h2>Back Equipment</h2>
					<div class="control">
						<label
							><input type="radio" id="back_equipment_cape" name="back_equipment" value="cape" checked /> Cape</label
						>
						<label><input type="radio" id="back_equipment_elytra" name="back_equipment" value="elytra" /> Elytra</label>
					</div>
				</div>
			</div>

			<div class="control-section">
				<h1>Skin</h1>
				<div>
					<div class="control">
						<label
							>URL:
							<input
								id="skin_url"
								type="text"
								value="img/hatsune_miku.png"
								placeholder="none"
								list="default_skins"
								size="20"
						/></label>
						<datalist id="default_skins">
							<option value="img/1_8_texturemap_redux.png"></option>
							<option value="img/hacksore.png"></option>
							<option value="img/haka.png"></option>
							<option value="img/hatsune_miku.png"></option>
							<option value="img/ironman_hd.png"></option>
							<option value="img/sethbling.png"></option>
							<option value="img/deadmau5.png"></option>
						</datalist>
						<input id="skin_url_upload" type="file" class="hidden" accept="image/*" />
						<button id="skin_url_unset" type="button" class="control hidden">Unset</button>
						<button type="button" class="control" onclick="document.getElementById('skin_url_upload').click();">
							Browse...
						</button>
					</div>
				</div>
				<div>
					<label class="control"
						>Model:
						<select id="skin_model">
							<option value="auto-detect" selected>Auto detect</option>
							<option value="default">Default</option>
							<option value="slim">Slim</option>
						</select>
					</label>
				</div>
			</div>

			<div class="control-section">
				<h1>Cape</h1>
				<div class="control">
					<label
						>URL:
						<input
							id="cape_url"
							type="text"
							value="img/mojang_cape.png"
							placeholder="none"
							list="default_capes"
							size="20"
					/></label>
					<datalist id="default_capes">
						<option value=""></option>
						<option value="img/mojang_cape.png"></option>
						<option value="img/legacy_cape.png"></option>
						<option value="img/hd_cape.png"></option>
					</datalist>
					<input id="cape_url_upload" type="file" class="hidden" accept="image/*" />
					<button id="cape_url_unset" type="button" class="control hidden">Unset</button>
					<button type="button" class="control" onclick="document.getElementById('cape_url_upload').click();">
						Browse...
					</button>
				</div>
			</div>

			<div class="control-section">
				<h1>Ears</h1>
				<div>
					<label class="control"
						>Source:
						<select id="ears_source">
							<option value="none">None</option>
							<option value="current_skin">Current skin</option>
							<option value="skin">Skin texture</option>
							<option value="standalone">Standalone texture</option>
						</select>
					</label>
				</div>
				<div id="ears_texture_input">
					<label class="control"
						>URL: <input id="ears_url" type="text" value="" placeholder="none" list="default_ears" size="20"
					/></label>
					<datalist id="default_ears">
						<option value=""></option>
						<option value="img/ears.png" data-texture-type="standalone"></option>
						<option value="img/deadmau5.png" data-texture-type="skin"></option>
					</datalist>
					<input id="ears_url_upload" type="file" class="hidden" accept="image/*" />
					<button id="ears_url_unset" type="button" class="control hidden">Unset</button>
					<button type="button" class="control" onclick="document.getElementById('ears_url_upload').click();">
						Browse...
					</button>
				</div>
			</div>

			<div class="control-section">
				<h1>Background</h1>
				<div class="control">
					<label
						>Type:
						<select id="background_type" value="panorama">
							<option value="color">Solid Color</option>
							<option value="panorama">Panorama</option>
						</select>
					</label>
				</div>
				<div id="background_color_options" class="control">
					<label
						>Color:
						<select id="background_color">
							<option value="#c2b4ff">Purple (#c2b4ff)</option>
							<option value="#87CEEB">Sky Blue (#87CEEB)</option>
							<option value="#90EE90">Light Green (#90EE90)</option>
							<option value="#FFB6C1">Light Pink (#FFB6C1)</option>
							<option value="#DDA0DD">Plum (#DDA0DD)</option>
						</select>
					</label>
				</div>
			</div>

			<div class="control-section">
				<h1>Panorama</h1>
				<div class="control">
					<label
						>URL:
						<input
							id="panorama_url"
							type="text"
							value="img/panorama.png"
							placeholder="none"
							list="default_panorama"
							size="20"
					/></label>
					<datalist id="default_panorama">
						<option value=""></option>
						<option value="img/panorama.png"></option>
					</datalist>
					<input id="panorama_url_upload" type="file" class="hidden" accept="image/*" />
					<button id="panorama_url_unset" type="button" class="control hidden">Unset</button>
					<button type="button" class="control" onclick="document.getElementById('panorama_url_upload').click();">
						Browse...
					</button>
				</div>
			</div>

			<div class="control-section">
				<h1>Name Tag</h1>
				<div class="control">
					<label>Text: <input id="nametag_text" type="text" value="" placeholder="none" size="20" /></label>
				</div>
			</div>

			<div class="control-section">
				<h1>Other examples</h1>
				<ul>
					<li><a href="offscreen-render.html">offscreen-render</a></li>
				</ul>
			</div>
		</div>

		<footer>
			<div>GitHub: <a href="https://github.com/bs-community/skinview3d">bs-community/skinview3d</a></div>
			<!--%%deploy_only%%
			<div>
				Built from
				commit <a href="https://github.com/bs-community/skinview3d/commit/{{build_commit}}">{{build_commit}}</a>
				at <time datetime="{{build_time}}">{{build_time}}</time>
			</div>
		-->
		</footer>
		<script type="module" src="./main.ts"></script>

		<script
			type="module"
			src="https://unpkg.com/stats.js@0.17.0/src/Stats.js"
			integrity="sha384-W71K+d2HbqXqQWSj3Vj4RDsIVvIV7lR8O6RArKAiqB39ntwLci0W08qOn4Z1n8sM"
			crossorigin="anonymous"
			async
		></script>
		<script type="module" async>
			import Stats from "https://unpkg.com/stats.js@0.17.0/src/Stats.js";
			const stats = new Stats();
			stats.dom.style.left = "";
			stats.dom.style.right = "0";
			document.body.appendChild(stats.dom);
			function loop() {
				stats.update();
				requestAnimationFrame(loop);
			}
			requestAnimationFrame(loop);
		</script>
	</body>
</html>
